<template>
  <!-- 关注页面左侧动态组件 -->
  <div class="concern-left">
      <!-- 标题 -->
        <div class="title">
          <div class="name">动态</div>
          <div class="btn">
            <i title="发动态"></i>
            <i title="发布视频"></i>
          </div>
        </div>
        <!-- 官方信息 -->
        <div class="official-info">
          <i class="icon"></i>
          <span>近三个月无新歌发布</span>
        </div>
        <!-- 动态内容 -->
        <ul class="content">
          <li v-for="i,index in 3" :key="index">
            <!-- 用户信息 -->
            <div class="info">
              <img class="headshot" src="./img/1.jpg">
              <div class="main">
                <span>网易CEO丁磊<img src="./img/2.png"></span>
                <span>分享单曲</span>
                <p>4月24日 13:34</p>
              </div>
            </div>
            <!-- 留言 -->
            <div class="word">
              今天是中国航天日，推荐时代少年团新歌《披风》，00后眼中的中国航天英雄，比超人更强，不用披风也能上太空。里面还有神舟十三号太空三人组的独家献声，气氛到位，大家听听。
            </div>
            <!-- 歌曲 -->
            <div class="song">
              <div class="img">
                <img src="./img/1.jpg">
                <i class="icon"></i>
              </div>
              <div class="song-info">
                <p>披风</p>
                <p>时代少年团</p>
              </div>
            </div>
            <!-- 图片 -->
            <!-- 小图 -->
            <div v-if="imageChange" @click="imageChange = !imageChange" class="little-img">
              <img src="./img/3.jpg">
            </div>
            <!-- 大图 -->
            <div v-if="!imageChange" @click="imageChange = !imageChange" class="big-img">
              <div class="big-title">
                <span>
                  <i class="icon"></i>
                  收起
                </span>
                <span>|</span>
                <span>
                  <i class="icon"></i>
                  查看原图
                </span>
                <span>|</span>
                <span>
                  <i class="icon"></i>
                  下载
                </span>
              </div>
              <img src="./img/3.jpg">
            </div>
            <!-- 点赞等 -->
            <div class="praise">
              <span>
                <i class="icon"></i>&nbsp;(100)
              </span>
              <span>|</span>
              <span>
                转发&nbsp;(100)
              </span>
              <span>|</span>
              <span>
                评论&nbsp;(100)
              </span>
            </div>
          </li>
        </ul>
  </div>
</template>

<script>
export default {
    name:'concern-left',
    data(){
      return{
        // 控制动态中大小图切换
        imageChange:true
      }
    }
}
</script>

<style lang="scss" scoped>
    .concern-left{
        .title{
          width: 100%;
          height: 40px;
          line-height: 40px;
          border-bottom: 2px solid #c00c0c;
          .name{
            font-size: 24px;
            color: #333;
            float: left;
          }
          .btn{
            float: right;
            i:nth-child(1){
              display: inline-block;
              width: 71px;
              height: 24px;
              vertical-align: middle;
              background: url('@/assets/frd_dyn_sprite.png') no-repeat;
              background-position: 0 -452px;
              cursor: pointer;
              &:hover{
                background-position: 0 -480px;
              }
            }
            i:nth-child(2){
              display: inline-block;
              width: 84px;
              height: 24px;
              vertical-align: middle;
              background: url('@/assets/frd_dyn_sprite.png') no-repeat;
              background-position: -100px -452px;
              cursor: pointer;
              margin-left: 10px;
              &:hover{
                background-position: -100px -480px;
              }
            }
          }
        }
        .official-info{
          width: 100%;
          height: 40px;
          line-height: 40px;
          color: #ccc;
          border: 1px solid rgba(0,0,0,0.12);
          border-radius: 8px;
          margin: 16px 0;
          text-align: center;
          i{
            display: inline-block;
            width: 24px;
            height: 24px;
            background: url('@/assets/iconnew20@1x.png') no-repeat;
            vertical-align: middle;
            margin-right: 3px;
          }
        }
        .content{
          li{
            width: 100%;
            padding-bottom: 10px;
            border-bottom: 1px solid #e8e8e8;
            margin-top: 20px;
            .info{
              display: flex;
              .headshot{
                width: 45px;
                height: 45px;
                cursor: pointer;
              }
              .main{
                width: 600px;
                margin: 8px 0 0 10px;
                span:nth-child(1){
                  color: #0c73c2;
                  font-size: 14px;
                  cursor: pointer;
                  &:hover{
                    text-decoration: underline;
                  }
                  img{
                    width: 15px;
                    height: 15px;
                    vertical-align: top;
                  }
                }
                span:nth-child(2){
                  font-size: 14px;
                  color: #666;
                  margin-left: 5px;
                }
                p{
                  color: #999;
                  margin-top: 9px;
                  cursor: pointer;
                  &:hover{
                    text-decoration: underline;
                  }
                }
              }
            }
            .word{
              font-size: 14px;
              color: #333;
              line-height: 18px;
              margin-left: 54px;
              margin-top: 15px;
            }
            .song{
              margin: 10px 0 10px 54px;
              height: 40px;
              padding: 10px;
              background-color: #f5f5f5;
              display: flex;
              .img{
                width: 40px;
                height: 40px;
                margin-right: 10px;
                cursor: pointer;
                position: relative;
                img{
                  width: 100%;
                  height: 100%;
                }
                .icon{
                  position: absolute;
                  width: 16px;
                  height: 17px;
                  left: 50%;
                  top: 50%;
                  transform: translate(-50%,-50%);
                  background: url('@/assets/iconall.png') no-repeat;
                  background-position: 0 0;
                }
                &:hover .icon{
                  background-position: 0 -60px;
                }
              }
              .song-info{
                line-height: 20px;
                p:nth-child(1){
                  font-size: 14px;
                  color: #333;
                  cursor: pointer;
                  &:hover{
                    text-decoration: underline;
                  }
                }
                p:nth-child(2){
                  color: #666;
                  cursor: pointer;
                  &:hover{
                    text-decoration: underline;
                  }
                }
              }
            }
            .little-img{
              width: 224px;
              height: 224px;
              margin-left: 54px;
              img{
                width: 100%;
                cursor: zoom-in;
              }
            }
            .big-img{
              width: 565px;
              height: 585px;
              background-color: #f5f5f5;
              margin-left: 54px;
              .big-title{
                padding: 12px 0 12px 20px;
                color: #666;
                line-height: 16px;
                height: 16px;
                .icon{
                  display: inline-block;
                  width: 13px;
                  height: 13px;
                  vertical-align: middle;
                  background: url('@/assets/frd_dyn_sprite.png') no-repeat;
                }
                span:nth-child(1),
                span:nth-child(3),
                span:nth-child(5){
                  cursor: pointer;
                  &:hover{
                    text-decoration: underline;
                  }
                }
                span:nth-child(1){
                  .icon{
                    background-position: -108px -19px;
                  }
                }
                span:nth-child(3){
                  .icon{
                    background-position: -180px -20px;
                  }
                }
                span:nth-child(5){
                  .icon{
                    background-position: -45px -58px;
                  }
                }
                span:nth-child(2),span:nth-child(4){
                  color: #ddd;
                  margin: 0 10px;
                }
              }
              img{
                margin-left: 20px;
                cursor: zoom-out;
              }
            }
            .praise{
              width: 222px;
              padding: 22px 0 12px 20px;
              color: #0e73ba;
              line-height: 16px;
              height: 16px;
              margin-left: 385px;              
              .icon{
                display: inline-block;
                width: 14px;
                height: 14px;
                vertical-align: text-top;
                background: url('@/assets/frd_dyn_sprite.png') no-repeat;
                background-position: 0 -20px;
              }
              span:nth-child(1),
              span:nth-child(3),
              span:nth-child(5){
                cursor: pointer;

                &:hover{
                  text-decoration: underline;
                }
              }
              span:nth-child(2),span:nth-child(4){
                color: #ddd;
                margin: 0 8px;
              }
            }
          }
        }
    }
</style>